<template>
  <div class="box">
    <el-form
        :model="ruleForm"
        :inline="false"
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
        size="medium"
    >
      <!-- <h2 class="tle">业务申请信息填写</h2> -->
      <div class="must">
        <el-form-item label="被许可人类型：" prop="picType">
          <el-select v-model="ruleForm.picType" @change="changeAplli" style="width:80%" placeholder="请选择被许可人类型">
            <el-option
                v-for="(item,index) in appliPerson"
                :label="item.title"
                :key="index"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 身份证照片(正反面) -->
        <el-form-item 
          prop="DBupload" 
          label="身份证照片(正反面)：" 
          v-if="ruleForm.picType==1" 
          :rules=" {  required: true,validator:DBLicense,trigger: 'change'  }">
          <upfile :callback="DBImageMain" :file_config="{name:3}">
            <img :src="mconfig.host + ruleForm.DBidcardAddr" alt=""  v-if="ruleForm.DBidcardAddr">
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
            <img src="../../assets/imgs/inform.png">
            <span>示例:</span>
            </div>
            <examimg :imgType="1"></examimg>
          </div>
          <span style="color:#f96900">请上传 身份证正反面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <!-- 身份证照片(正面) -->
        <el-form-item prop="uploads" label="身份证照片(正面)：" v-if="ruleForm.picType==1" :rules=" {  required: true,validator:picbussiLicense,trigger: 'change'  }">
          <upfile :callback="backCardImageMain" :file_config="{name:1}">
            <img :src="mconfig.host + ruleForm.idcardAddr" alt=""  v-if="ruleForm.idcardAddr">
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png">
              <span>示例:</span>
            </div>
            <examimg :imgType="2"></examimg>
          </div>
          <span style="color:#f96900">请上传 身份证正面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <!-- 营业执照 -->
        <el-form-item prop="licUpload" label="营业执照：" v-if="ruleForm.picType==1 || ruleForm.picType==0" :rules=" {  required: true,validator:bussiAddrLicense,trigger: 'change'  }">
          <upfile :callback="backImage" :file_config="{name:2}">
            <img :src="mconfig.host + ruleForm.bussiAddr" alt="" v-if="ruleForm.bussiAddr">
          </upfile>
          <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
            <examimg :imgType="0"></examimg>
          </div>
          <span style="color:#f96900">请上传 营业执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <!-- 其他合法执照 -->
        <el-form-item prop="otherUpload" label="其他合法执照：" v-if="ruleForm.picType==9"
        :rules="{  required: true,validator:otherImgLicense,trigger: 'change'  }">
          <upfile :callback="otherImg" :file_config="{name:9}">
            <img :src="mconfig.host + ruleForm.otherAddr" alt="" v-if="ruleForm.otherAddr">
          </upfile>
          <span style="color:#f96900">请上传 其他合法执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>


        <el-form-item label="被许可人名称（中文）：" prop="allowToCh">
          <el-input v-model="ruleForm.allowToCh" placeholder="请填写被许可人名称（中文）"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知"/>
            <div class="content">
              <span>示例：王五</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="（英文）：">
          <el-input v-model="ruleForm.allowToEn" placeholder="请填写被许可人名称（英文）"></el-input>
        </el-form-item>
        <el-form-item label="被许可人地址（中文）：" prop="allowToAddrCh">
          <el-input v-model="ruleForm.allowToAddrCh" placeholder="请填写被许可人地址（中文）"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知"/>
            <div class="content">
              <span>示例：四川省成都市双流区中和大道二段</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="（英文）：">
          <el-input v-model="ruleForm.allowToAddrEn" placeholder="请填写被许可人地址（英文）"></el-input>
        </el-form-item>
        <el-form-item label="商标注册号：" prop="registNum">
          <el-input v-model="ruleForm.registNum" placeholder="请填写商标注册号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知"/>
            <div class="content">
              <span>示例：2515783543</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="原使用许可备案申请号：" prop="registNumOri">
          <el-input v-model="ruleForm.registNumOri" placeholder="请填写原使用许可备案申请号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知"/>
            <div class="content">
              <span>示例：610103100025511</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="是否有共有人：" prop="share">
          <el-radio v-model="ruleForm.share" @change="radioAnniu" :label="1">是</el-radio>
          <el-radio v-model="ruleForm.share" :label="0">否</el-radio>
        </el-form-item>
        <div v-if="ruleForm.share == 1" class="common">
          <el-form-item label="其他共有许可人：" >
            <both :callback="getBoth" :append="$store.state.alterData.append" style="width:80%" :class_id="$route.query.id"></both>
          </el-form-item>
        </div>

        <!-- <div v-if="ruleForm.share" class="common common-butt">
          <el-form-item v-if="ruleForm.share == true" label="其他共有许可人" prop="person_type"></el-form-item>

          <div v-for="(item,index) in common" :key="index" class="common-list">
            <el-form-item :label="item.name" :key="item.key" :prop="'commonArr.' + index + '.partNameCh'" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
              <el-input v-model="item.value" placeholder="请填写中文姓名"></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知"/>
                <div class="content">
                  <span>示例：王五</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="item.englishName" prop="person_type">
              <el-input v-model="item.englishValue" placeholder="请填写英文姓名"></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知"/>
                <div class="content">
                  <span>示例：中国境内可不填，否则必填</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="item.site" :key="item.key" :prop="'commonArr.' + index + '.partAddrCh'" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
              <el-input v-model="item.siteValue" placeholder="请填写中文地址"></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知"/>
                <div class="content">
                  <span>示例：四川省成都市双流区中和大道二段</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="item.englishSite" prop="person_site">
              <el-input v-model="item.englishSiteValue" placeholder="请填写英文地址"></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知"/>
                <div class="content">
                  <span>示例：中国境内可不填，否则必填</span>
                </div>
              </div>
            </el-form-item>
          </div>
          <div style="text-align:center;padding:0px 0px 20px 100px;">
            <el-button icon="el-icon-plus" @click="plus" circle ></el-button>
            <el-button icon="el-icon-minus" @click="dele" v-if="common.length>0" circle></el-button>
          </div>
        </div> -->
        <el-form-item label="撤回理由：" prop="reasonsWithdrawal">
          <el-input type="textarea" v-model="ruleForm.reasonsWithdrawal" placeholder="请填写撤回理由"
                    style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="upload" label="网上确认书：" prop="afterAmount">
          <span id="star">*</span>
          <div>
            <upfile :callback="setSure">
              <img :src="img_default['qrfile']" v-if="img_default['qrfile']" style="width:148px;height:148px;margin-bottom:10px" />
            </upfile>
            <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
              <examimg :imgType="7"></examimg>
            </div>
          </div>
          <div>
            <span class="informs">
              请点此
              <a :href="mconfig.host + '/file/download?fileType=4'"
              >下载网上确认书</a
              >,查到相应商标编号并填充
            </span>
            <br />
            <span class="notice"
            >请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span
            >
          </div>
        </el-form-item>

        <el-form-item label="其他附件：" prop="dengjichenluofile">
          <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提示：其他附件</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="submitCheck('ruleForm')">提交并审核</el-button>
          </div>
        </el-form-item>
        <el-dialog
            class="dialog"
            :show-close="false"
            :center="true"
            :visible.sync="dialogVisible"
            width="460px"
            :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span>选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="branchNetworkId">
            <el-select style="margin-left:-10px" v-model="ruleForm.branchNetworkId" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
              >
                <span style="float: left">{{ item.deptName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer" style="display: flex;justify-content: space-between;">
            <el-button type="info" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
            class="hintMsg"
            :show-close="false"
            title="温馨提示"
            :visible.sync="centerDialogVisible"
            @close="skip()"
            width="462px"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import BaseUpload from "./BaseUpload";
import upfile from "../common/upfile"
import { mapState } from "vuex"
import both from "../common/both.vue";//共有人插件
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
  components: {
    BaseUpload,
    upfile,
    both,
    examimg,
    uploads
  },
  data() {
    return {
      // 是否显示图片
      showImgOne: false,
      showImgTwo: false,
      uploadImg: false,
      //网点列表
      options: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //共有人提示
      common_message:'',
      //共有人模板
      common: [],
      // 申请人类型
      appliPerson: [],
      //共有人模板
      commonModel:{
        name: "名称(中文)：",
        englishName: "(英文)：",
        site: "地址(中文)：",
        englishSite: "(英文)：",
        value: "",   // 中文名称
        englishValue: "",   // 英文名称
        siteValue: "",   // 中文地址
        englishSiteValue: "",  // 英文地址
      },
      // 实际模板
      modelcommon:{
        partNameCh: "",
        partNameEn: "",
        partAddrCh: "",
        partAddrEn: "",
      },
      commonData:[],
      // add:0,
      //表单唯一id
      classId: "",
      //填写的信息
      ruleForm: {
        allowToCh: "",  //被许可人名称(中文)
        allowToEn: "",  // 被许可人名称(英文)
        allowToAddrCh: "",  // 被许可人地址(中文)
        dengjichenluofile:[],
        allowToAddrEn: "",  // 被许可人地址(英文)
        contact: "",  // 联系人
        registNum: "",  // 商标注册号
        registNumOri: "",  // 原使用许可备案申请号
        qrfiles_status:'',//商标确认书验证字段
        share: 0,  // 是否共有商标
        reasonsWithdrawal: "",  // 撤回理由
        qrfiles: '',  // 网上确认书
        branchNetworkId: "",  // 网点编号
        commonArr: [],
        qrfilesUrl: '',// 后端返回确认书图片框地址
        picType: 0,  // 申请人类型
        upload: "",
        DBupload:"",
        licUpload:'',
        uploads: "",
        otherUpload:"",
        picdbcard:"",// 身份证正反面
        picdcard: "", // 身份证正面
        // picbussi: "",
        idcardAddr:"",  // 身份证正面地址
        picbussi:"",  // 身份证正面地址
        bussiAddr:"", // 营业执照地址
        otherAddr:"",//其它执照
        DBidcardAddr:"",//身份证正反面
      },
      rules: {
        allowToCh: [
          {required: true, message: "请填写被许可人中文名称", trigger: "change"},
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: "请填写中文名称",
            trigger: "blur",
          },
          // {min: 2, max: 5, message: "被许可人中文名称长度在2到5个字符之间", trigger: "blur"}
        ],
        // dengjichenluofile: [
        //   { required: true, message: "附件不能为空", trigger: "change" },
        // ],
        contact: [
          {required: true, message: "请填写联系人", trigger: "blur"},
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: "联系人只能填写中文",
            trigger: "blur",
          },
          {min: 2, max: 5, message: "联系人长度在2到5个字符之间", trigger: "blur"}
        ],
        registNum: [
          {
              required: true,
              message: "请输入注册号",
              trigger: "blur",
          },
          {
              pattern: /^[A-Za-z0-9]{0,30}$/,
              message: "请输入正确的注册号",
              trigger: "blur",
          },
        ],
        allowToAddrCh: [
          { required: true, message: "请填写被许可人中文地址", trigger: "change" },
          // {
          //   pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村|段)*$/,
          //   message: "你的地址格式不正确",
          //   trigger: "blur",
          // },
        ],
        registNumOri: [
          {
              required: true,
              message: "请输入申请号",
              trigger: "blur",
          },
          {
              pattern: /^[A-Za-z0-9]{0,30}$/,
              message: "请输入正确的申请号",
              trigger: "blur",
          },
        ],
        reasonsWithdrawal: [
          {required: true, message: "请上传撤回原因", trigger: "blur"},
          {min: 1, max: 255, message: "撤回原因长度在1到255个字符之间", trigger: "blur"}
        ],
        picType: [
          {required: true, message: "请选择被许可人类型", trigger: "blur"},
        ],
        upload: [
          {required: true, message: "请上传申请人相关照片", trigger: "blur"},
        ],
        share: [
          {required: true, message: "请选择是否有共有人", trigger: "blur"},
        ],
      },
      img_default: {},
      counts: 0,
    };
  },
  mounted() {
    this.ruleForm.upload = "1";
    this.appliPerson = this.mconfig.options;
    // 修改操作页面回显数据
    if (this.stateJdg) {
      this.uploadImg = true
      this.showImgOne = true
      this.showImgTwo = true
      // 第三步骤——数据回显
      let {
        allowToCh,  //被许可人名称(中文)
        allowToEn,  // 被许可人名称(英文)
        allowToAddrCh,  // 被许可人地址(中文)
        allowToAddrEn,  // 被许可人地址(英文)
        contact,  // 联系人
        registNum,  // 商标注册号
        registNumOri,  // 原使用许可备案申请号
        share,  // 是否共有商标
        reasonsWithdrawal,  // 撤回理由
        branchNetworkId,  // 网点编号
        licenseeType,
        otherfile,
        idcard,
        iddbimage,
        businessLicense,
        // proAppends
      } = this.alterData.data;
      console.log(this.alterData.data, 123456)
      let {
        qrfile,  // 网上确认书
      } = this.alterData.public;
      let append = this.alterData.append;// 共有人信息json
      // this.commonData = proAppends;// 共有人信息
      this.ruleForm.allowToCh = allowToCh;  // 被许可人名称(中文)
      this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
      this.ruleForm.allowToEn = allowToEn;  // 被许可人名称(英文)
      this.ruleForm.allowToAddrCh = allowToAddrCh;  //被许可人地址(中文)
      this.ruleForm.allowToAddrEn = allowToAddrEn;  //被许可人地址(英文)

      this.ruleForm.contact = contact;  //联系人
      //  this.ruleForm.agent = agent;  //代理机构名称
      this.ruleForm.registNum = registNum;  //商标注册号
      this.ruleForm.registNumOri = registNumOri;   // 原使用许可备案申请号
      // this.ruleForm.share = Number(isComm);
      this.ruleForm.share = JSON.parse(JSON.stringify(share));   // 是否共有商标
      this.ruleForm.reasonsWithdrawal = reasonsWithdrawal;  // 撤回理由
      this.ruleForm.branchNetworkId = JSON.parse(branchNetworkId);  // 网点
      this.ruleForm.qrfilesUrl = this.mconfig.host + String(qrfile); // 后端返回确认书地址
      if (qrfile) {
        this.img_default.qrfile = this.mconfig.host + qrfile;
      }
      this.ruleForm.qrfiles_status="1";
      this.ruleForm.picType = Number(licenseeType);
      this.ruleForm.idcardAddr = idcard;
      this.ruleForm.DBidcardAddr = iddbimage //身份证正反面
      this.ruleForm.bussiAddr = businessLicense;
      this.ruleForm.otherAddr = businessLicense;

      //回显共有人append
      if (this.$store.state.alterData.append) {
        this.$store.state.alterData.append.forEach((item) => {
          let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
          this.ruleForm.commonArr.push(objCommom);
          let objValue = JSON.parse(JSON.stringify(this.commonModel));
          objValue.value = item.partNameCh;
          objValue.englishValue = item.partNameEn;
          objValue.siteValue = item.partAddrCh;
          objValue.englishSiteValue = item.partAddrEn;
          this.common.push(objValue);
        });
      }
    }
  },
  watch: {
    //通过数据监听的方式将共有人模板中的信息同步到proAppends中
    common: {
      handler(newName, oldName) {
        this.common.forEach((item, index) => {
          // console.log(this.common);
          this.ruleForm.commonArr[index].partNameCh = item.value;
          this.ruleForm.commonArr[index].partNameEn = item.englishValue;
          this.ruleForm.commonArr[index].partAddrCh = item.siteValue;
          this.ruleForm.commonArr[index].partAddrEn = item.englishSiteValue;
        });
      },
      deep: true,
    },
  },
  computed: {
    ...mapState(["stateJdg", "alterData"])
  },
  methods: {
    backUrl(url,file_config){
        this.ruleForm[file_config["field"]].push(url)
    },
    delUrl(index,file_config){
        this.ruleForm[file_config["field"]].splice(index,1)
        this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
    },
    // 提交并审核验证
    getBoth(value){
      console.log(value,145645);
      this.commonData = value;
    },
    changeAplli(){
      console.log(this.ruleForm.picType)
      this.ruleForm.allowToCh = '';
      this.ruleForm.allowToAddrCh = '';
      this.ruleForm.idcardAddr = '';
      this.ruleForm.DBidcardAddr = '';
      this.ruleForm.bussiAddr = '';
      this.ruleForm.otherAddr = '';
    },
    picbussiLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.idcardAddr) {
        callback();
      } else {
        callback(new Error("请上传身份证证件"));
      }
    },
    DBLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.DBidcardAddr) {
        callback();
      } else {
        callback(new Error("请上传身份证正反面"));
      }
    },
    bussiAddrLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.bussiAddr) {
        callback();
      } else {
        callback(new Error("请上传营业执照"));
      }
    },
    otherImgLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.otherAddr) {
          callback();
      } else {
          callback(new Error("请上传其他合法执照"));
          // this.open1("请上传营业执照", "error");
      }
    },
    //确认书
    setSure(files) {
      if(files.length>0){
        this.ruleForm.qrfiles_status="1"
      }else {
        this.ruleForm.qrfiles_status=""
      }
      this.ruleForm.qrfiles = files[0];
      this.img_default = {};
      this.ruleForm.qrfilesUrl = ''; // 修改img图片地址隐藏img
      this.uploadImg = true
      if(this.ruleForm.qrfiles){
        this.uploadImg = true
      }else{
        this.uploadImg = false
      }
    },

    backImage(files) {
      let data = new FormData();
      this.ruleForm.picbussi = files;
      this.ruleForm.licUpload = "1"
      if(this.ruleForm.picType != 9){
        data.append(
        "picbussi",this.ruleForm.picbussi[0] ? this.ruleForm.picbussi[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==0){
            this.ruleForm.allowToAddrCh = res.data.data.po.address;
            this.ruleForm.allowToCh = res.data.data.po.name;
            this.$set(this.ruleForm,'bussiAddr',res.data.data.popath)
        }else if(this.ruleForm.picType==1){
          this.$set(this.ruleForm,'bussiAddr',res.data.data.popath)
        }
      })
    },

    DBImageMain(files) {
      console.log(files);
      let data = new FormData();
      this.ruleForm.picdbcard = files;
      this.ruleForm.DBupload = "1"
      if(this.ruleForm.picType == 1){
      data.append(
      "picdbcard",
      this.ruleForm.picdbcard[0] ? this.ruleForm.picdbcard[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        this.$set(this.ruleForm,'DBidcardAddr',res.data.data.picpath);
      })
    },

    backCardImageMain(files){
      let data = new FormData();
      this.ruleForm.picidcard = files;
      this.ruleForm.uploads = "1"
      if(this.ruleForm.picType == 1){
        data.append(
        "picidcard",
        this.ruleForm.picidcard[0] ? this.ruleForm.picidcard[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==1){
        this.ruleForm.allowToAddrCh = res.data.data.pic.address;
        this.ruleForm.allowToCh = res.data.data.pic.name;
        this.$set(this.ruleForm,'idcardAddr',res.data.data.id_card)
        }
      })
    },

    otherImg(files){
      let data = new FormData();
      this.ruleForm.otherAddr = files;
      this.ruleForm.otherUpload = "1"
      if(this.ruleForm.picType == 9){
        data.append(
        "picbussi",this.ruleForm.otherAddr[0] ? this.ruleForm.otherAddr[0] : "");
      }
      data.append("picType", this.ruleForm.picType==1?1:0);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==9){
          this.$set(this.ruleForm,'otherAddr',res.data.data.popath)
        }
      })
    },
    submitCheck(formName) {
      if(this.ruleForm.share==1){
          if (this.commonData.length == 0) { //没填共有人
          this.open1("请填写共有人信息！", "error");
          return;
          }
      }
      this.$refs[formName].validate((valid) => {
        if (valid && this.uploadImg == true) {
          this.dialogVisible = true;
        } else if (this.uploadImg == false) {
          this.open1("请上传网上确认书", "error");
        } else {
          this.open1("请完整填写表单数据", "error");
        }
      });
    },

    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
    },

    // 删减共有人
    cutShare(index) {
      this.proAppends.splice(index, 1);
    },
    //表单提交确认事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.branchNetworkId==""){
            this.$message({
              type:"error",
              message:"请选择网点"
            })
            return
          }
          //每次提交重新生成新的FormData用于储存新的数据
          this.dialogVisible = false;
          // 实例化FormData
          var formData = new FormData();
          /*********************** 公共数据开始 **********************/
              //获取vuex中保存的步骤一、二中的数据
          let arr = this.$store.getters.getRuleForm
          for (let key in arr) {
            formData.append(key, arr[key])
          }
          /*********************** 公共数据结束 **********************/

          /*********************** 需要提交的数据开始 **********************/
          let ruleForm = this.ruleForm;
          formData.append("classId", this.classId);  // 业务唯一编号

          formData.append("allowToCh", ruleForm.allowToCh);  //被许可人名称(中文)
          formData.append("allowToEn", ruleForm.allowToEn);  // 被许可人名称(英文)
          formData.append("allowToAddrCh", ruleForm.allowToAddrCh); // 被许可人地址(中文)
          formData.append("allowToAddrEn", ruleForm.allowToAddrEn); // 被许可人地址(英文)

          //  formData.append("agent", ruleForm.agent);  // 代理机构名称
          // formData.append("contact", "张议元");  // 联系人
          formData.append("registNum", ruleForm.registNum);   // 商标注册号
          formData.append("registNumOri", ruleForm.registNumOri);  // 原使用许可备案申请号
          formData.append("share", ruleForm.share);    // 是否共有商标
          formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
          formData.append("reasonsWithdrawal", ruleForm.reasonsWithdrawal);  // 撤回理由
          formData.append("uploadImg", ruleForm.uploadImg);  // 商标确认书是否存在
          // formData.append("upData", JSON.stringify(this.commonData));  // 上传共有人信息
          if (this.img_default["qrfile"]) {
            formData.append("qrfiles", {});
          } else {
            formData.append("qrfiles", this.ruleForm.qrfiles);
          }

          // formData.append("qrfiles", ruleForm.qrfiles);  // 网上确认书
          formData.append("branchNetworkId", ruleForm.branchNetworkId);   // 网点编号
          formData.append("licenseeType", this.ruleForm.picType); // 被许可人类型
          if(this.ruleForm.picType == 1){
            formData.append("IDCard", this.ruleForm.idcardAddr); // 身份证正面地址
            formData.append("iddbimage", this.ruleForm.DBidcardAddr); // 身份证正反面地址
          }
          formData.append("businessLicense", this.ruleForm.bussiAddr?this.ruleForm.bussiAddr:this.ruleForm.otherAddr) // 营业执照地址

          // 共有商标或者集体商标时传json数组
          formData.append("proAppends", JSON.stringify(this.commonData));
          // for (let key in arr) {
          //   formData.append(key, arr[key]);
          // }
          // if (this.ruleForm.share == "1") {
          //   formData.append(
          //     "proAppends",
          //     this.ruleForm.share ? JSON.stringify(this.ruleForm.commonArr) : ""
          //   );
          // }

          /*********************** 需要提交的数据结束 **********************/

          /*********************** 请求开始 **********************/
          let urls = '';
          if (this.stateJdg) {
            // 修改操作
            formData.append("id", this.alterData.public.id);  // 修改才需要传的id
            formData.append("modelId", this.alterData.public.modelId);  // 修改才需要传的modelId
            urls = "/trademark/proWoafrotr/modifyNoCommit"
          } else {
            // 新增操作
            urls = "/trademark/proWoafrotr/firstSubmit"
          }

          //配置请求头
          let config = {
            header: {
              "Content-Type": "multipart/form-data",
            },
          };
          // axios向后端发送数据
          this.$http.post(urls, formData, config)
              .then((response) => {
                //若状态码不为200则不跳转
                if (response.data.code != 200) {
                  this.open1("提交失败", "error");
                  return;
                }
                this.centerDialogVisible = true;
              })
              .catch((error) => { });
          /*********************** 请求结束 **********************/

        } else {
          return false;
        }
      });
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    //重置表单函数(没用上)
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //点击删除更变许可人
    dele() {
      this.common.pop();
      this.ruleForm.commonArr.pop();
      if (this.common.length == 0) {
        this.ruleForm.share = 0;
      }
    },
    //点击添加更变许可人
    plus() {
      let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
      this.ruleForm.commonArr.push(objCommom);
      let objValue = JSON.parse(JSON.stringify(this.commonModel));
      this.common.push(objValue);
      if (this.common.length != 0) {
        this.ruleForm.share = 1;
      }
    },
    radioAnniu() {
      console.log(this.common.length);
      if (this.ruleForm.share == 1) {
        if (this.common.length == 0) {
          this.plus();
          return
        }
      }
    },
  },
  created() {
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("/trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
  },
};
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
    .el-input {
      width: 80%;
    }
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    // width: 1000px;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .el-form-item {
      width: 680px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 10px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .back-img{
    width: 250px;
    img{
      width: 100%;
    }
  }
  .back-img2{
    width: 250px;
    img{
      width: 100%;
    }
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f96900;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .input {
    width: 190px;
  }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .notice {
    color: #f96900;
    font-size: 12px;
  }
  .inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    height: 32px;
    color: #f96900;
    font-size: 10px;
    line-height: 14px;
    img {
      margin: 11px;
    }
    .content {
      display: flex;
      flex-direction: column;
      .ts {
        text-indent: 3em;
      }
    }
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f96900;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }

  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
  .common-list {
    position: relative;
    .less {
      position: absolute;
      right: -5rem;
      top: 1.5rem;
      width: 5rem;
      text-align: center;
      font-size: 1rem;
      i {
        margin: 0 0.5rem;
      }
    }
  }
}

.dialog /deep/.el-form-item__label {
  width: 100px !important;
}
.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}
.dialog /deep/.el-input {
  width: 250px;
}
.el-checkbox-group {
  line-height: 14px;
}
// .is-checked/deep/.el-radio__inner,
// .is-checked/deep/.el-checkbox__inner {
//   border-color: #999999;
//   background: #999999;
// }
.el-radio/deep/.el-radio__inner:hover {
  border-color: #999999 !important;
}
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
  color: #333;
}
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}
.el-checkbox/deep/.el-checkbox__inner:hover {
  border-color: #999999 !important;
}
.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}
.hintMsg {
  /deep/.el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    color: #fff;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
    .lan {
      background-color: #2c9dfc !important;
      border-color: #2c9dfc !important;
    }
  }
}
.inform {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  width: 250px;
  height: 32px;
  color: #f96900;
  font-size: 10px;
  line-height: 14px;
  img {
    margin: 11px;
  }
  .content {
    display: flex;
    flex-direction: column;
    .ts {
      text-indent: 3em;
    }
  }
}
.common{
  position:relative;
}
.common_message {
  font-size: 8px;
  color: #f56c6c;
  padding-left: 205px;
  position: absolute;
  top: 97px;
}
.box .common  .button_add{
  margin-left: 245px;
  margin-bottom:30px;
}

/deep/ .el-dialog.el-dialog--center /deep/ {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 20px 20px 50px;
  }

  .hint {
    color: #F96900;
    background-color: #fff;
    padding: 0;
    padding-bottom: 20px;
  }

  .el-button {
    margin: 0;
  }

  .el-form-item__label {
    width: 86px !important;
  }
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
    position: absolute;
    top: 0;
    left: 380px;
    display: flex;
    justify-content: space-between;
  }
  .img-inform{
    position: relative;
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    transform: translate(-50%,-50%);
    margin-right: 10px;
  }
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    transform: translate(-50%,-50%);
    font-size: 12px;
    white-space: nowrap;
    padding: 0px 5px 0px 0px;
    color: #f96900;
  }
}
</style>